<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>树组件</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>


    <div class="layui-row">

<!--        树区域-->
        <div class="layui-col-md6">
            <div id="test1"></div>
        </div>

<!--        表单区域-->
        <div class="layui-col-md6">

            <form class="layui-form" id="permissionForm" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">节点名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required  lay-verify="required"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">url</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" lay-verify="required"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="icon" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="status" lay-verify="required">
                            <option>请选择</option>
                            <option value="1">启用</option>
                            <option value="0">停用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required">
                            <option>请选择</option>
                            <option value="菜单">菜单</option>
                            <option value="目录">目录</option>
                            <option value="按钮">按钮</option>
                            <option value="其他菜单">其他菜单</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="order" lay-verify="number"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="remarks"autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="text-align: right">
                        <button type="button" lay-flag="giao" id="reset"  class="layui-btn layui-btn-primary">重置</button>
                        <button class="layui-btn" type="button" lay-flag="giao" id="commit" >提交</button>
                    </div>
                </div>
            </form>

        </div>
    </div>




<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/lay/modules/jquery.js}"></script>
<script>
    layui.use(['tree','form','jquery'], function(){
        var tree = layui.tree;
        var form = layui.form;
        var $ = layui.jquery;

        function loadFormDat(id) {
            $.get("/getPermissionById",{id:id},function (data) {
                if(data.code!=200){
                    layer.msg(data.message, {icon: 2,time:1000});
                    return;
                }else {
                    //console.log(data)
                    var obj = data.data
                    $("input[name='name']").val(obj.name);
                    $("input[name='url']").val(obj.url);
                    $("input[name='icon']").val(obj.icon);
                    $("div.layui-form-select").find('dl').find("dd[lay-value='" + obj.status + "']").click();
                    $("div.layui-form-select").find('dl').find("dd[lay-value='" + obj.type + "']").click();
                    $("input[name='order']").val(obj.order);
                    $("input[name='remarks']").val(obj.remarks);
                    $("button[lay-flag='giao']").attr("id",obj.id);
                }
            })
        }
        // 重置按钮
        $("#reset").click(function () {
            let pid = $(this).attr("id");
            loadFormDat(pid)
        })
        // 提交按钮
        $("#commit").click(function () {
            // 获取表单数据
            var formdata = $("#permissionForm").serialize()+"&id="+$(this).attr("id");
            $.post("/updatePermissionById",formdata,function (data) {
                if(data.code==200){
                    layer.msg(data.message, {icon: 1,time:1000});
                    loadTree()
                }else {
                    layer.msg(data.message, {icon: 2,time:1000});
                }
            })
        })
        // 加载树组件
        function loadTree(){
            $.post("/getPermossionList",[],function (data) {
                tree.render({
                    elem: '#test1'  //绑定元素
                    ,edit: ['add','del']
                    ,data: data
                    ,customOperate: true
                    ,click: function(obj){
                        loadFormDat(obj.data.id)
                        /*console.log(obj.data); //得到当前点击的节点数据
                        console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                        console.log(obj.elem); //得到当前节点元素
                        console.log(obj.data.children); //当前节点下是否有子节点*/
                    }
                    ,operate: function(obj){
                        var type = obj.type; //得到操作类型：add、edit、del
                        var data = obj.data; //得到当前节点的数据
                        var elem = obj.elem; //得到当前节点元素
                        var id = data.id; //得到节点索引
                        if(type === 'add'){ //增加节点
                            var index = layer.open({
                                type: 2,
                                area: ['700px', '500px'],
                                content: '/popupPage/menu/add/0', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                                btn: ['提交','返回'],
                                yes: function (index, layero) {
                                    //按钮【按钮一】的回调
                                    var body = layer.getChildFrame('body', index);
                                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                                    //console.log(body) //得到iframe页的body内容
                                    let serialize = $(body).children("#addPermission").serialize()+"&pId="+id;
                                    //alert(serialize)
                                    // 发送添加节点请求
                                    $.ajax({
                                        type: "get",
                                        url: "/addPermission",
                                        contentType: "application/json; charset=utf-8",
                                        data: serialize,
                                        success: function (data) {
                                            if(data.code==200){
                                                layer.msg(data.message, {icon: 1,time:1000});
                                                loadTree()
                                            }else {
                                                layer.msg(data.message, {icon: 2,time:1000});
                                            }
                                            layer.close(index);
                                        }
                                    })
                                    //body.find('input').val('Hi，我是从父页来的')
                                },
                                btn2: function (index, layero) {
                                    //按钮【按钮一】的回调
                                    console.log(layero)
                                },
                            });

                        } else if(type === 'update'){ //修改节点
                            console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                        } else if(type === 'del'){ //删除节点
                            // 发送节点删除权限
                            layer.confirm('是否确定删除?', {icon: 3, title:'提示'}, function(index){
                                //do something
                                $.ajax({
                                    type: 'delete',
                                    url: '/deleteById',
                                    data: {id:id},//'ids='+arr+'&_method=delete',
                                    success: function(data){
                                        if(data.code==200){
                                            layer.msg(data.message, {icon: 1,time:1000});
                                            loadTree()
                                        }else {
                                            layer.msg(data.message, {icon: 2,time:1000});
                                        }
                                    },
                                    error: function(data){
                                        layer.msg(data.message, {icon: 2,time:1000});
                                    }
                                });
                                layer.close(index);
                            });

                        };
                    }
                });
            })
        }

        loadTree();

        //渲染

    });

    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>